<template>
    <div>
        <el-divider content-position="center"><span style="font-size: 17px;color: #0800ff;font-weight:bold">人员管理</span>
        </el-divider>
        <div class="divstyle">
            <el-card class="box-card">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <!-- 搜索与添加区域 -->
                        <el-input v-model="searchInfo" placeholder="请输入用户id或用户名或健康状况进行查询" clearable style="padding-left: 40%">
                            <el-button slot="append" icon="el-icon-search" @click="Search"></el-button>
                        </el-input>
                    </el-col>
                </el-row>
                <div style="padding-left: 86%">
                    <el-button @click="yisi" type="danger" size="mini">疑似/确诊</el-button>
                </div>
                <el-divider></el-divider>
                <el-divider></el-divider>
                <el-table stripe border :data="AllUserForm.slice((currentPage-1)*pageSize,currentPage*pageSize)">
                    <el-table-column label="ID" prop="uid" width="60" align="center"></el-table-column>
                    <el-table-column label="用户名" prop="uname" align="center"></el-table-column>
                    <el-table-column label="性别" prop="sex"  width="80" align="center"></el-table-column>
                    <el-table-column label="年龄" prop="age"  width="80" align="center"></el-table-column>
                    <el-table-column label="电话" prop="tel" align="center"></el-table-column>
                    <el-table-column label="住址" prop="address" align="center"></el-table-column>
                    <el-table-column label="健康状况" prop="health" align="center"></el-table-column>
                    <el-table-column label="操作"  width="215">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    plain
                                    @click="temperatureInfo(scope.row.uid)">体温
                            </el-button>
                            <!--scope.$index→拿到每一行的index;scope.$row→拿到每一行的数据-->
                            <el-button
                                    size="mini"
                                    type="danger"
                                    plain
                                    @click="getHealthId(scope.row.uid)">健康
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="primary"
                                    plain
                                    @click="getUserInfo1(scope.row)">私信
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="divstyle">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   small
                                   background
                                   :page-sizes="[5,10,20,100]" :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper" :total="AllUserForm.length">
                    </el-pagination>
                </div>
            </el-card>
        </div>

        <el-dialog title="此页面只展示前7条体温数据" :visible.sync="dialogTableVisible" center width="30%">
            <el-table :data="Temperature7" size="mini">
                <el-table-column property="tim" label="日期" align="center"></el-table-column>
                <el-table-column property="tem" label="体温" align="center"></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
            </span>
        </el-dialog>


        <el-dialog title="请选择健康状态" :visible.sync="dialogFormVisible" center width="33%">
            <el-form :model="healthForm">
                <el-form-item label="健康状态" :label-width="formLabelWidth">
                    <el-select v-model="healthForm.health" placeholder="请选择健康状态">
                        <el-option label="健康" value="健康" style="color: #00ff48"></el-option>
                        <el-option label="疑似" value="疑似" style="color: #fff000"></el-option>
                        <el-option label="确诊" value="确诊" style="color: #ff1e00"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateHealth">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="通知" :visible.sync="showDialog" center width="35%">
            <el-form :model="informInfo">
                <el-form-item label="通知内容:">
                    <el-input type="textarea" v-model="informInfo.informDetail" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="insertInform">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "ManagingPeople",
        data() {
            return {
                currentPage: 1, // 当前页码
                pageSize: 5,// 每页的数据条数
                AllUserForm: [],
                AllTemperature: [],
                Temperature: [],
                Temperature7: [],
                dialogTableVisible: false,
                dialogFormVisible: false,
                showDialog:false,
                formLabelWidth: '100px',
                healthForm: {uid: "", health: "",},
                searchInfo: "",
                utilsInfo: {
                    num: "",
                    info: '',
                },

                informInfo:{
                    uid:"",
                    uname:"",
                    informDetail:"",
                },
            }
        },
        created() {
            this.getAllUser()
        },
        methods: {
            async getAllUser() {
                const {data: res_j} = await this.$http.get("getAllUser");
                this.AllUserForm = res_j.UserList
            },
            async temperatureInfo(row) {
                const {data: res} = await this.$http.get("getAllTemperature?tid=" + row);
                this.AllTemperature = res;
                console.log(this.AllTemperature)
                for (var i = 0; i < 7; i++) {
                    /*this.Temperature7.push(this.AllTemperature[i])*/
                    /*this.AllTemperature.push({"tim":"sb","tem":"hh"})*/
                    this.Temperature[i] = this.AllTemperature[i]
                }
                console.log(this.Temperature)
                this.Temperature7 = this.Temperature
                this.dialogTableVisible = true;
            },
            getHealthId(row) {
                this.healthForm.uid = row;
                this.dialogFormVisible = true;
            },
            async updateHealth() {
                console.log(this.healthForm)
                const {data: res} = await this.$http.post("updateUserHealth", this.healthForm);
                if (res === "ok") {
                    this.$message.success("修改成功")
                    this.dialogFormVisible = false
                    await this.$router.push({path: "/404"});
                    await this.$router.push({path: "/ManagingPeople"})
                } else {
                    this.$message.error("修改失败")
                    this.dialogFormVisible = false
                }
            },
            getUserInfo1(row){
                this.informInfo.uid = row.uid;
                this.informInfo.uname = row.uname;
                this.showDialog = true;
            },
            async insertInform(){
                console.log(this.informInfo)
                const {data: res} = await this.$http.post("insertInform", this.informInfo);
                if (res === "ok") {
                    this.showDialog = false;
                    this.informInfo.informDetail = ""
                    this.$message.success("成功")
                } else {
                    this.showDialog = false
                    this.$message.error("失败")
                }
            },
            async Search() {
                if (this.searchInfo === "") {
                    console.log(this.searchInfo)
                    await this.getAllUser()
                } else {
                    /*判断是否为number类型数据*/
                    var numReg = /^[0-9]*$/
                    var numRe = new RegExp(numReg)
                    if (!numRe.test(this.searchInfo)) {
                        this.utilsInfo.num = ""
                        this.utilsInfo.info = this.searchInfo
                    } else {
                        this.utilsInfo.num = this.searchInfo
                        this.utilsInfo.info = ""
                    }
                    console.log(this.utilsInfo)
                    const {data: res} = await this.$http.post("Search", this.utilsInfo);
                    this.AllUserForm = res
                    console.log(this.AllUserForm)
                }
            },

            yisi() {
                this.$router.push("/yisiPeople")
            },
            /* 分页功能的实现 */
            handleSizeChange(val) {
               /* console.log(`每页 ${val} 条`);*/
                this.currentPage = 1;
                this.pageSize = val;
            },
            handleCurrentChange(val) {
               /* console.log(`当前页: ${val}`);*/
                this.currentPage = val;
            },
        },
    }
</script>

<style scoped>
    .divstyle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box-card {
        width: 90%;
    }

    /*分割线样式*/
    .el-divider--horizontal {
        margin: 8px 0;
        background: 0 0;
        border-top: 1px dashed #0979ea;
    }

</style>